<script setup>
import { ref } from 'vue';

// 农田数据统计
const farmStats = ref({
  totalArea: 1200,
  plantedArea: 720,
  crops: [
    { name: '小麦', area: 320, progress: 85 },
    { name: '青稞', area: 280, progress: 72 },
    { name: '莴笋', area: 120, progress: 53 },
    { name: '菠菜', area: 120, progress: 13 },
    { name: '橄榄', area: 120, progress: 33 },
    { name: '当归', area: 120, progress: 83 },
    { name: '藜麦', area: 120, progress: 73 },
  ]
});

// 设备状态
const devices = ref([
  { name: '气象站1', status: 'online', lastData: '2分钟前' },
  { name: '土壤传感器1', status: 'online', lastData: '1分钟前' },
  { name: '灌溉系统1', status: 'offline', lastData: '3小时前' },
  { name: '摄像头1', status: 'online', lastData: '5分钟前' }
]);

// 报警信息
const alerts = ref([
  { id: 1, level: 'high', message: '东区小麦田土壤湿度过低', time: '10:25' },
  { id: 2, level: 'medium', message: '西区玉米地发现虫害', time: '09:40' },
  { id: 3, level: 'low', message: '气象站2需要校准', time: '昨天' }
]);

// 切换选项卡
const activeTab = ref('stats');
</script>

<template>
  <el-col :span="7" class="right-panel">
    <!-- 选项卡切换 -->
    <el-tabs v-model="activeTab" class="panel-tabs">
      <el-tab-pane label="数据统计" name="stats">
        <div class="stats-container">
          <el-card class="summary-card">
            <h3>农田概况</h3>
            <div class="summary-grid">
              <div class="summary-item">
                <div class="summary-value">{{ farmStats.totalArea }}亩</div>
                <div class="summary-label">总面积</div>
              </div>
              <div class="summary-item">
                <div class="summary-value">{{ farmStats.plantedArea }}亩</div>
                <div class="summary-label">已种植</div>
              </div>
              <div class="summary-item">
                <div class="summary-value">84%</div>
                <div class="summary-label">利用率</div>
              </div>
            </div>
          </el-card>

          <el-card class="crops-card">
            <h3>作物分布</h3>
            <div class="crop-progress" v-for="crop in farmStats.crops" :key="crop.name">
              <div class="crop-info">
                <span class="crop-name">{{ crop.name }}</span>
                <span class="crop-area">{{ crop.area }}亩</span>
              </div>
              <el-progress :percentage="crop.progress" :stroke-width="12" />
            </div>
          </el-card>
        </div>
      </el-tab-pane>

      <el-tab-pane label="设备监控" name="devices">
        <el-card class="device-card">
          <div class="device-list">
            <div v-for="device in devices" :key="device.name" class="device-item">
              <el-icon :class="`status-${device.status}`">
                <component :is="device.status === 'online' ? 'CircleCheck' : 'Warning'" />
              </el-icon>
              <div class="device-info">
                <div class="device-name">{{ device.name }}</div>
                <div class="device-meta">最后数据: {{ device.lastData }}</div>
              </div>
              <el-button size="small" type="text">详情</el-button>
            </div>
          </div>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="报警信息" name="alerts">
        <el-card class="alert-card">
          <div class="alert-list">
            <div v-for="alert in alerts" :key="alert.id" :class="`alert-item alert-${alert.level}`">
              <el-icon>
                <component :is="alert.level === 'high' ? 'BellFilled' : alert.level === 'medium' ? 'WarningFilled' : 'InfoFilled'" />
              </el-icon>
              <div class="alert-content">
                <div class="alert-message">{{ alert.message }}</div>
                <div class="alert-time">{{ alert.time }}</div>
              </div>
              <el-button size="small" type="text">处理</el-button>
            </div>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<style scoped lang="less">
.right-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  background-color: #1a1a1a;
  color: #fff;
  padding: 10px;
  border-left: 1px solid #333;
}

.panel-tabs {
  height: 100%;

  :deep(.el-tabs__content) {
    height: calc(100% - 40px);
    overflow-y: auto;
  }

  :deep(.el-tabs__header) {
    margin: 0;
  }
}

.stats-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.summary-card, .crops-card, .device-card, .alert-card {
  background-color: #2a2a2a;
  border: none;
  color: #fff;

  h3 {
    margin: 0 0 15px 0;
    color: #fff;
    font-size: 16px;
  }
}

.summary-grid {
  display: flex;
  justify-content: space-between;
  text-align: center;

  .summary-item {
    flex: 1;

    .summary-value {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .summary-label {
      font-size: 12px;
      color: #aaa;
    }
  }
}

.crop-progress {
  margin-bottom: 15px;

  .crop-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;

    .crop-name {
      font-weight: bold;
    }

    .crop-area {
      color: #aaa;
      font-size: 12px;
    }
  }
}

.device-list, .alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.device-item, .alert-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;

  .device-info, .alert-content {
    flex: 1;
    margin-left: 10px;

    .device-name, .alert-message {
      font-weight: bold;
    }

    .device-meta, .alert-time {
      font-size: 12px;
      color: #aaa;
    }
  }
}

.device-item {
  background-color: #333;

  .status-online {
    color: #67c23a;
  }

  .status-offline {
    color: #f56c6c;
  }
}

.alert-item {
  &.alert-high {
    background-color: rgba(245, 108, 108, 0.2);
    border-left: 3px solid #f56c6c;
  }

  &.alert-medium {
    background-color: rgba(230, 162, 60, 0.2);
    border-left: 3px solid #e6a23c;
  }

  &.alert-low {
    background-color: rgba(144, 147, 153, 0.2);
    border-left: 3px solid #909399;
  }
}
</style>